<script>
export default {
  name: 'messageDetail',
  data() {
    return {
      id: 0,
    }
  },
  onLoad(options) {
    this.id = options.id

    // 通过id获取消息内容
  },
}
</script>

<template>
  <view class="message-detail-layout">
    <my-header title="系统消息"></my-header>
    <my-content class="message-detail-content" :default-padding-top="40">
      <view class="message-detail-header">
        <view class="message-detail-header-title">这是消息标题</view>
        <view class="message-detail-header-time">2022-01-01 12:00:00</view>
      </view>
      <scroll-view class="message-detail-body" scroll-y="true">
        <rich-text :nodes="'<p>这是测试内容</p>'"></rich-text>
      </scroll-view>
    </my-content>
  </view>
</template>

<style scoped lang="scss">
.message-detail-layout {
  height: 100vh;
  background-color: #141414;
  color: white;

  .message-detail-content {
    padding: 40rpx;
    height: 100%;
    display: flex;
    flex-direction: column;

    .message-detail-header {
      .message-detail-header-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #dedede;
      }

      .message-detail-header-time {
        margin-top: 14rpx;
        font-size: 26rpx;
        color: #808080;
      }
    }

    .message-detail-body {
      margin-top: 40rpx;
      flex: 1;
      overflow-y: hidden;
      font-size: 28rpx;
      color: #dedede;
    }
  }
}
</style>